import React, { useState, useMemo, useEffect } from 'react';
import { ColView, Btn, useHigh, GridTable, filter_row, useCmd, WaitUmd, MainView, BtTxt, PanelFind, loc } from 'sui';
import { load_supply } from 'stock/base/cmd';
import { load_kind } from './cmd';
import { PartView } from './part';

const TaskView = () => {
    const [set_kind, mapKind] = useState();
    const [supply, setSupply] = useState();
    const [map_supply, mapSupply] = useState();
    const [high] = useHigh(140, 100);
    const umd = useCmd("file/list/gkind");

    useEffect(() => {
        load_supply("part", setSupply, mapSupply);
        load_kind(mapKind);
    }, []);

    const getRow = useMemo(() => {
        const lst = ["sn", "name"];
        return filter_row(umd.value, lst, umd.filter);
    }, [umd.value, umd.filter]);

    if (umd.isFin("col")) {
        const list = [
            {sn: "partask", name: loc("l_136")},
        ];

        return <ColView hreturn={umd.hreturn} title={loc("l_136")} subtitle={loc("l_221")} list={list} cur="partask"/>;
    }

    if (umd.isFin("part")) {
        return <PartView hreturn={umd.hreturn} cur={umd.cur} map_supply={map_supply} supply={supply} set_kind={set_kind}/>;
    }

    const col = [
        {name: loc("l_193"), key: 'index', width: 70},
        {name: loc("l_238"), key: 'e_opt', width: 90, formatter: (props) => {
            const d = props.row;
            return (
                <div className="inline-flex">
                    <BtTxt hcmd={() => umd.pact(null, d, "part")}>{loc("l_887")}</BtTxt>
                </div>
            );
        }},
        {name: "SN", key: 'sn', width: 200},
        {name: loc("l_189"), key: 'name', width: 300},
    ];

    const Right = () => (
        <div className="inline-flex">
            <Btn hcmd={() => umd.pact(null, null, "col")}>{loc("l_221")}</Btn>
        </div>
    );

    return (
        <MainView>
            <PanelFind left={loc("l_136")} right={<Right/>} hcmd={umd.setFilter}/>
            <GridTable col={col} row={getRow} high={high}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {TaskView};
